import { Card, Tree, Row, Col, Spin, Button, Icon, Empty } from 'antd';
import _ from 'lodash';
import React, { useState, useEffect } from 'react';

// 组成树形结构
function createTree(list, pid) {
  const tree = [];
  list.forEach(item => {
    const x = item;
    if (pid === item.pid) {
      x.children = createTree(list, item.id);
      tree.push(item);
    }
  });
  return tree;
}
export default function Transfer() {
  // 初始数据
  const [initData, setInitData] = useState([
    { key: '1', id: '1', title: '分类', path: '1' }, // 一级
    { key: '1_1', id: '1_1', title: '家电', pid: '1', path: '1-1_1', disabled: true }, // 二级
    { key: '1_2', id: '1_2', title: '服饰', pid: '1', path: '1-1_2' }, // 二级
    { key: '1_1_1', id: '1_1_1', title: '电视机', pid: '1_1', path: '1-1_1-1_1_1', disabled: true }, // 三级
    { key: '1_1_2', id: '1_1_2', title: '洗衣机', pid: '1_1', path: '1-1_1-1_1_2', disabled: true }, // 三级
    { key: '1_2_1', id: '1_2_1', title: '男装', pid: '1_2', path: '1-1_2-1_2_1' }, // 三级
    { key: '1_2_2', id: '1_2_2', title: '女装', pid: '1_2', path: '1-1_2-1_2_2' }, // 三级
  ]);

  const [state, setState] = useState({
    treeData1: [],
    treeData2: [],
    checkedKeys1: [],
    checkedKeys2: [],
  });

  const build = list => {
    // 获取选中的id返回数组
    const selectedKeys = [];
    let selectedKeysAll = [];
    const data2 = [];
    _.forEach(list, item => {
      if (item.disabled) {
        selectedKeys.push(item.id);
        selectedKeysAll.push(item.path.split('-'));
      }
    });
    selectedKeysAll = _.unionBy(_.flattenDeep(selectedKeysAll));
    _.forEach(_.cloneDeep(list), itemX => {
      const x = itemX;
      x.disabled = false;
      _.forEach(selectedKeysAll, itemJ => {
        if (itemX.id === itemJ) data2.push(itemX);
      });
    });
    setState({
      ...state,
      treeData1: createTree(list),
      treeData2: createTree(data2),
      checkedKeys1: selectedKeys,
    });
  };

  // 处理数据
  useEffect(() => build(initData), []);

  // 筛选选中的节点
  const onCheck = (checkedKeys, key) => {
    setState({
      ...state,
      [key]: checkedKeys,
    });
  };

  const handleRight = () => {
    initData.forEach(item => {
      const x = item;
      state.checkedKeys1.forEach(itemJ => {
        if (item.id === itemJ) x.disabled = true;
      });
    });
    build(initData);
  };

  const handleLeft = () => {
    initData.forEach(item => {
      const x = item;
      state.checkedKeys2.forEach(itemJ => {
        if (item.id === itemJ) x.disabled = false;
      });
    });
    build(initData);
  };

  console.log(state.treeData1);

  return (
    <Row type="flex" justify="space-between" style={{ width: 400 }} align="middle">
      <Col>
        <Card>
          <Spin tip="Loading..." spinning={false}>
            <Tree
              checkable
              expandedKeys={['1', '1_1', '1_2']}
              checkedKeys={state.checkedKeys1}
              // defaultCheckedKeys={['0-0-0', '0-0-1']}
              onCheck={checkedKeys => onCheck(checkedKeys, 'checkedKeys1')}
              treeData={state.treeData1}
            />
          </Spin>
        </Card>
      </Col>
      <Col>
        <Button onClick={handleRight}>
          <Icon type="right" />
        </Button>
        <br />
        <br />
        <Button onClick={handleLeft}>
          <Icon type="left" />
        </Button>
      </Col>
      <Col>
        <Card>
          <Spin tip="Loading..." spinning={false}>
            {state.treeData2.length ? (
              <Tree
                checkable
                expandedKeys={['1', '1_1', '1_2']}
                // defaultExpandedKeys={['0-0-0', '0-0-1']}
                // checkedKeys={state.checkedKeys2}
                onCheck={checkedKeys => onCheck(checkedKeys, 'checkedKeys2')}
                treeData={state.treeData2}
              />
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} spinning={false} />
            )}
          </Spin>
        </Card>
      </Col>
    </Row>
  );
}
